//接收2个参数
import React, { useState, useEffect } from 'react';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import axios from 'axios';

const StockChart2 = ({ code, frequency }) => {
  const [chartOptions, setChartOptions] = useState({});

  useEffect(() => {
    if (!code || !frequency) return;
  
    Highcharts.setOptions({
      lang: {
        rangeSelectorZoom: ''
      }
    });

    let monthValue;
    if (frequency === "d") {
      monthValue = "12";
    } else if (frequency === "w") {
      monthValue = "24";
    } else if (frequency === "m") {
      monthValue = "36";
    }
  
    const payload = {
      code: code,
      month: monthValue,
      frequency: frequency  // 使用传入的frequency参数
    };
  
    axios.post('/api/stock/stock_kline', payload)
    //axios.get('/stock-data2.json')  // 修改为您的数据获取API或文件
      .then(response => {
        const rawData = response.data.data.data;
        let ohlc = [], volume = [];

        console.log("获得的数据是:",  rawData);
  
        rawData.forEach(item => {
          const year = parseInt(item.date.substring(0, 4), 10);
          const month = parseInt(item.date.substring(5, 7), 10) - 1; // 月份从0开始计数
          const day = parseInt(item.date.substring(8, 10), 10);
  
          const utcTimestamp = Date.UTC(year, month, day);
  
          ohlc.push([
            utcTimestamp, // 时间戳
            parseFloat(item.open),   // 开盘价
            parseFloat(item.high),   // 最高价
            parseFloat(item.low),    // 最低价
            parseFloat(item.close)   // 收盘价
          ]);
          volume.push([
            utcTimestamp,  // 时间戳
            parseInt(item.volume)  // 成交量
          ]);
        });
  
        setChartOptions({
          rangeSelector: {
            selected: 1,
            inputDateFormat: '%Y-%m-%d'
          },
          xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
              day: '%Y-%m-%d',
              week: '%Y-%m',
              month: '%Y-%m',
              year: '%Y'
            }
          },
          tooltip: {
            split: false,
            shared: true,
          },
          yAxis: [{
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: '股价'
            },
            height: '65%',
            resize: {
              enabled: true
            },
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: '成交量'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
          }],
          series: [{
            type: 'candlestick',
            name: code,
            color: 'green',  // 跌时的颜色
            lineColor: 'green',
            upColor: 'red',  // 涨时的颜色
            upLineColor: 'red',
            data: ohlc,
            id: 'sz'
          }, {
            type: 'column',
            name: '成交量',
            data: volume,
            yAxis: 1
          }]
        });
      })
      .catch(error => {
        console.error('Error fetching stock data:', error);
      });
  }, [code, frequency]);  // 添加frequency到依赖数组中  

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType={'stockChart'}
      options={chartOptions}
    />
  );
};

export default StockChart2;
